<template>
  <form @submit="submitForm">
        <div class="field">
            <label class="label">Username</label>
            <div class="control has-icons-left">
                <input class="input is-success" type="text" v-model="fields.username">
                <span class="icon is-small is-left">
                <i class="fa fa-user"></i>
                </span>
            </div>
        </div>

        <div class="field">
            <label class="label">Password</label>
            <div class="control has-icons-left">
                <input class="input is-danger" type="text" v-model="fields.password">
                <span class="icon is-small is-left">
                <i class="fa fa-lock"></i>
                </span>
            </div>
        </div>

        <div class="field is-grouped">
            <div class="control">
                <button class="button is-link">登录</button>
            </div>
            <div class="control">
                <button class="button is-link is-light">忘记密码</button>
            </div>
        </div>
  </form>
</template>

<script>

export default {
  name: 'Login',
  data() {
    return {
        fields: {
            username: '',
            password: ''
        }
    }  
  },
  methods: {
      submitForm(evt) {
          this.$store.dispatch('login', this.fields).then(() => {
              this.$router.push({path: '/goods'});
          });
          evt.preventDefault();
      }
  }
}
</script>

<style>

</style>